<template>
  <div class="order-detail-container">
    <!-- 订单详情头部 -->
    <div class="detail-header">
      <div class="header-left">
        <button class="back-button" @click="goBack">返回</button>
        <h2 class="detail-title">订单详情</h2>
      </div>
    </div>

    <!-- 订单详情内容 -->
    <div class="detail-content">
      <!-- 订单基本信息 -->
      <div class="info-group">
        <div class="info-item">
          <span class="info-label">订单编号：</span>
          <span class="info-value">{{ orderDetail.orderNo }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">订单时间：</span>
          <span class="info-value">{{ orderDetail.orderTime }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">认证公司：</span>
          <span class="info-value">{{ orderDetail.companyName }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">统一代码：</span>
          <span class="info-value">{{ orderDetail.unifiedCode }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">法定代表：</span>
          <span class="info-value">{{ orderDetail.legalPerson }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">服务项目：</span>
          <span class="info-value">{{ orderDetail.serviceItem }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">服务费用：</span>
          <span class="info-value price">¥{{ orderDetail.serviceFee }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">项目说明：</span>
          <span class="info-value">{{ orderDetail.projectDesc }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">订单状态：</span>
          <span class="info-value status-{{ orderDetail.status }}">{{ orderDetail.statusText }}</span>
        </div>
      </div>

      <!-- 订单其他信息 -->
      <div class="info-group">
        <div class="info-item">
          <span class="info-label">法人身份证号：</span>
          <span class="info-value">{{ orderDetail.idCard || '-' }}</span>
          <button class="edit-button">修改</button>
        </div>
        <div class="info-item">
          <span class="info-label">联系手机号码：</span>
          <span class="info-value">{{ orderDetail.phone || '-' }}</span>
          <button class="edit-button">修改</button>
        </div>
        <div class="info-item">
          <span class="info-label">去年营业额：</span>
          <span class="info-value">{{ orderDetail.lastYearRevenue || '-' }}</span>
          <button class="edit-button">修改</button>
        </div>
      </div>

      <!-- 底部操作按钮 -->
      <div class="bottom-actions">
        <button class="pay-button" @click="payOrder">立即支付</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 订单详情数据
const orderDetail = ref({
  orderNo: '',
  orderTime: '',
  companyName: '',
  unifiedCode: '',
  legalPerson: '',
  serviceItem: '',
  serviceFee: '',
  projectDesc: '',
  status: '',
  statusText: '',
  idCard: '',
  phone: '',
  lastYearRevenue: ''
})

// 返回上一页
const goBack = () => {
  router.push('/pages/order/screenshot_order')
}

// 支付订单
const payOrder = () => {
  router.push('/pages/payment/index')
}

// 获取订单详情
const getOrderDetail = () => {
  const orderId = route.query.orderId || '2510122006450571550'
  
  // 这里应该是从API获取订单详情数据
  // 目前使用模拟数据
  orderDetail.value = {
    orderNo: orderId,
    orderTime: '2025-10-12 20:06:45',
    companyName: '北京星路程软件有限公司',
    unifiedCode: '91110116MA01B5MT9N',
    legalPerson: '连达海',
    serviceItem: '税务登记',
    serviceFee: '359.00',
    projectDesc: '快速，简便',
    status: 'pending',
    statusText: '待支付',
    idCard: '',
    phone: '17700009999',
    lastYearRevenue: '0.00'
  }
}

// 页面挂载时获取订单详情
onMounted(() => {
  getOrderDetail()
})
</script>

<style scoped>
/* 订单详情容器 - 与首页完全一致，使用全局.app-container控制宽度 */
.order-detail-container {
  width: 100%;
  min-height: 100vh;
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;
}

/* 详情头部 */
.detail-header {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: var(--white);
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-button {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-primary);
  margin-right: 16px;
}

.detail-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.detail-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}



/* 详情内容 */
.detail-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* 信息组 */
.info-group {
  background-color: var(--white);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

/* 信息项 */
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 13px;
  color: var(--text-light);
  width: 120px;
}

.info-value {
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1;
}

/* 价格样式 */
.price {
  color: #ff4d4f;
  font-weight: 500;
}

/* 状态样式 */
.status-pending {
  color: #fa8c16;
}

.status-paid {
  color: #52c41a;
}

.status-canceled {
  color: var(--text-light);
}

/* 编辑按钮 */
.edit-button {
  background-color: #f5f5f5;
  color: var(--text-secondary);
  border: none;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}

/* 底部操作按钮 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background-color: var(--white);
  border-top: 1px solid var(--border-color);
}

.pay-button {
  width: 100%;
  padding: 12px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

/* 响应式设计 */
@media screen and (max-width: 320px) {
  .detail-content {
    padding: 12px;
  }
  
  .info-group {
    padding: 12px;
  }
  
  .info-label {
    width: 100px;
    font-size: 12px;
  }
  
  .info-value {
    font-size: 12px;
  }
}

/* 移除页面级别的响应式宽度设置，完全依赖全局.app-container的宽度控制 */
@media screen and (min-width: 768px) {
  .bottom-actions {
    max-width: 448px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>